<template>
  <div>
    图书名称:
    <input type="text"
    placeholder="输入任务名"
    v-model.trim="name"
    ><br>
    <button
    @click="addData"
    :disabled="flag"
    >添加/修改</button>
    <table border="1" cellspacing="0" cellpadding="10">
      <tr>
        <th>序号</th>
        <th>图书名称</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
      <t-main
      v-for="(item, index) in list" :key="index"
      :item="item"
      :listLength="list.length"
      @on-del="delData"
      @on-redact="redaData"
      />
    </table>
  </div>
</template>

<script>
import axios from 'axios'
import TMain from './components/TMain.vue'
// console.log(axios)
axios.defaults.baseURL = 'http://liufusong.top:4000/'
export default {
  components: { TMain },
  data () {
    return {
      list: [],
      name: '',
      flag: false,
      num: 1, // 约定num等于1就是添加，num等于2就是修改
      newBookId: ''
    }
  },

  watch: {
    // 判断添加按钮是否禁用
    // 监听输入框内容name
    name () {
      this.bookName()
    },
    // 监听列表数据list
    list () {
      this.bookName()
    }
  },

  created () {
    this.getData()
  },

  methods: {
    // 获取图书列表
    async getData () {
      try {
        const res = await axios({
          url: 'books',
          method: 'GET'
        })
        // console.log(res)
        this.list = res.data
        console.log(this.list)
      } catch {
        console.log('获取数据失败')
      }
    },

    // 添加/修改图书
    async addData () {
      if (this.name === '') {
        return alert('请输入图书名')
      }
      if (this.num === 1) { // 添加
        try {
          await axios({
            url: 'books',
            method: 'POST',
            data: {
              name: this.name
            }
          })
          this.name = ''
          this.getData()
        } catch {
          console.log('上传数据失败')
        }
      } else { // 修改
        try {
          await axios({
            url: 'books/' + this.newBookId,
            method: 'PUT',
            data: {
              name: this.name
            }
          })
          // console.log('可以了')
          this.name = ''
          this.getData()
          this.num = 1
        } catch {
          alert('修改数据失败')
        }
      }
      // 添加图书
      // console.log(this.name)
      // try {
      //   await axios({
      //     url: 'books',
      //     method: 'POST',
      //     data: {
      //       name: this.name
      //     }
      //   })
      //   this.name = ''
      //   this.getData()
      // } catch {
      //   console.log('上传数据失败')
      // }
    },

    // 删除图书
    async delData (e) {
      try {
        await axios({
          url: 'books/' + e,
          method: 'DELETE'
        })
        this.getData()
      } catch {}
    },

    // 输入框内容判断事件 判断添加按钮是否禁用
    // theChange () {
    //   const isChange = this.list.findIndex((book) => {
    //     return book.name === this.name
    //   })
    //   if (isChange !== -1) {
    //     this.flag = true
    //   } else {
    //     this.flag = false
    //   }
    // }

    // 判断添加按钮是否禁用
    async bookName () {
      try {
        const newName = await axios({
          url: 'books/book/' + this.name,
          method: 'GET'
        })
        if (newName.data.status === 1) {
          this.flag = true
        } else {
          this.flag = false
        }
      } catch {
        alert('请求验证失败')
      }
    },

    // 编辑功能
    async redaData (e) {
      try {
        const res = await axios({
          url: 'books/' + e,
          method: 'GET'
        })
        this.name = res.data.name
        this.num = 2
        this.newBookId = e
      } catch {
        alert('请求验证失败')
      }
    }
  }
}
</script>

<style scoped lang='less'>

</style>
